<template>
  <div class="filtrate">
    <div class="filtrateHeader">
      <span class="filtrateHeaderSpan">说明：目前支持学科和关键字条件筛选</span>
      <el-button
        type="success"
        icon="el-icon-edit"
        size="small"
        @click="$router.push(`/questions/new`)"
        >新增试题</el-button
      >
    </div>
    <el-form
      :inline="true"
      :model="formInline"
      ref="formlist"
      class="demo-form-inline"
      label-width="80px"
    >
      <el-form-item label="学科" prop="subjectID">
        <el-select
          v-model="formInline.subjectID"
          placeholder="请选择"
          @change="changeSubject()"
        >
          <el-option
            v-for="item in listform.SubjectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级目录" prop="catalogID">
        <el-select v-model="formInline.catalogID" placeholder="请选择">
          <el-option
            v-for="item in listform.TwoSubjectList"
            :key="item.id"
            :label="item.directoryName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标签" prop="tags">
        <el-select placeholder="请选择" v-model="formInline.tags">
          <el-option
            v-for="item in listform.tags"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="关键字" label-width="80px" prop="keyword">
        <el-input
          placeholder="根据题干搜索"
          v-model="formInline.keyword"
          style="width: 221px"
        />
      </el-form-item>
      <el-form-item label="试题类型" prop="questionType">
        <el-select placeholder="请选择" v-model="formInline.questionType">
          <el-option
            v-for="item in listform.subtype"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="难度" prop="difficulty">
        <el-select placeholder="请选择" v-model="formInline.difficulty">
          <el-option
            v-for="item in listform.difficulty"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="方向" prop="direction">
        <el-select placeholder="请选择" v-model="formInline.direction">
          <el-option
            v-for="item in listform.direction"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="录入人" prop="creatorID">
        <el-select placeholder="请选择" v-model="formInline.creatorID">
          <el-option
            v-for="item in listform.dataClerk"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="题目备注" prop="remarks">
        <el-input v-model="formInline.remarks" style="width: 221px" />
      </el-form-item>
      <el-form-item label="企业简称" prop="shortName">
        <el-input v-model="formInline.shortName" style="width: 221px" />
      </el-form-item>
      <el-form-item label="城市" prop="province">
        <el-select
        filterable
          placeholder="请选择"
          v-model="formInline.province"
          @change="getCitysList"
          style="width: 100px"
        >
          <el-option
            v-for="item in listform.province"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <el-select
          :filterable="ISfilterable"
          placeholder="请选择"
          v-model="formInline.city"
          style="width: 100px"
        >
          <el-option
            v-for="item in listform.city"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 200px">
        <el-button size="small" @click="clearForm">清除</el-button>
        <el-button size="small" type="primary" @click="onSubmit"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { simple as getSubjectListAPI } from '@/api/hmmm/subjects'
import { simple as getUserListAPI } from '@/api/base/users'
import {
  difficulty as getDifficulty,
  questionType as getQuestionType,
  direction as getDirection
} from '@/api/hmmm/constants'
import { provinces as getProvinces, citys as getCitys } from '@/api/hmmm/citys'
import { list as getTWOsubjectAPI } from '@/api/hmmm/directorys'
import { simple as getSimplelistAPI } from '@/api/hmmm/tags'
export default {
  name: 'QuestionsFiltrate',
  data () {
    return {
      // 表单value值
      formInline: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 城市
        city: ''
      },
      // 渲染列表
      listform: {
        SubjectList: [], // 学科
        TwoSubjectList: [], // 二级目录
        tags: [], // 标签
        keyword: '', // 关键字
        subtype: getQuestionType, // 试题类型
        difficulty: getDifficulty, // 难度
        direction: getDirection, // 方向
        dataClerk: [], // 录入人
        Titlenotes: '', // 题目备注
        company: '', // 企业简称
        province: '', // 城市
        city: ''
      },
      paramelist: {
        keyword: '',
        disabled: ''
      },
      objSb: {},
      ISfilterable: false
    }
  },
  methods: {
    /**
     * 点击搜索
     */
    onSubmit () {
      // 执行筛选列表
      const obj = {}
      for (const key in this.formInline) {
        if (this.formInline[key]) {
          obj[key] = this.formInline[key]
        }
      }
      // 想父组件传入需筛选的数据
      this.$parent.$parent.fromData = {
        page: 1,
        pagesize: this.$parent.$parent.fromData.pagesize,
        ...obj
      }
      // 设置表头为全部
      this.$parent.$parent.chkState = 'all'
      // 执行父组件的获取列表方法
      this.$parent.$parent.getTableData()
    },
    /**
     * 获取学科列表
     */
    async getSubjectList () {
      const { data: res } = await getSubjectListAPI()
      this.listform.SubjectList = res
    },
    /**
     * 学科change事件
     */
    async changeSubject () {
      this.formInline.catalogID = []
      this.getSubjectList()
      const id = this.formInline.subjectID
      const {
        data: { items: res }
      } = await getTWOsubjectAPI({
        subjectID: id,
        page: 1,
        pagesize: 9999
      })
      // console.log(res)
      this.listform.TwoSubjectList = res
      const { data: arr } = await getSimplelistAPI({ subjectID: id })
      this.listform.tags = arr
    },
    /**
     * 获取用户列表渲染录入人
     */
    async getUserList () {
      const { data: res } = await getUserListAPI(this.paramelist)
      this.listform.dataClerk = res
    },
    /**
     * 获取城市列表
     */
    getProvincesList () {
      this.listform.province = getProvinces()
    },
    /**
     * 获取地区列表
     */
    getCitysList () {
      this.ISfilterable = true // 地区可搜索
      this.listform.city = getCitys(this.formInline.province)
    },
    /**
     * 清除表单
     */
    clearForm () {
      // 清除表单数据
      this.$refs.formlist.resetFields()
      this.formInline.city = null
      // 设置表头为全部
      this.$parent.$parent.chkState = 'all'
      // 获取正常列表
      this.$parent.$parent.fromData = {
        page: 1,
        pagesize: this.$parent.$parent.fromData.pagesize
      }
      // 重新渲染
      this.$parent.$parent.getTableData()
      this.ISfilterable = true // 地区不可搜索
    }
  },
  created () {
    this.getSubjectList()
    this.getUserList()
    this.getProvincesList()
  }
}
</script>
<style lang="scss" scoped>
.filtrateHeader {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  .filtrateHeaderSpan {
    color: pink;
    font-size: 12px;
  }
}
::v-deep {
  .demo-form-inline {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
</style>
